import React, { useEffect } from 'react'
import { connect } from 'react-redux'
import { Layout, Menu, Breadcrumb } from 'antd';
import { withRouter } from 'react-router-dom'
import RootView from '../router';
const { Header, Content, Sider } = Layout;


export const Home = ({ list, history }) => {
    useEffect(() => {
        if (!sessionStorage.getItem("authList")) {
            sessionStorage.setItem('authList', JSON.stringify(list))
        }
    }, [])
    return (
        <div className='h100'>
            <Layout>
                <Header className="header">
                    <div className="logo" />
                </Header>
                <Layout>
                    <Sider width={200} className="site-layout-background">
                        <Menu
                            theme="dark"
                            mode="inline"
                            defaultSelectedKeys={['1']}
                            defaultOpenKeys={['sub1']}
                            onClick={({ key }) => {
                                history.push(key)
                            }}
                            style={{
                                height: '100%',
                                borderRight: 0,
                            }}
                            items={list}
                        />
                    </Sider>
                    <Layout
                        style={{
                            padding: '0 24px 24px',
                        }}
                    >
                        <Breadcrumb
                            style={{
                                margin: '16px 0',
                            }}
                        >
                            {
                                history.location.pathname.split('/').map((item, index) => {
                                    return <Breadcrumb.Item key = { index }>
                                        { item }
                                    </Breadcrumb.Item>
                                })
                            }

                        </Breadcrumb>
                        <Content
                            className="site-layout-background"
                            style={{
                                padding: 24,
                                margin: 0,
                                minHeight: 280,
                            }}
                        >
                            {/* sessionStorage.getItem("authList")? JSON.parse(sessionStorage.getItem("authList"))[0].children: list[0].children */}
                            <RootView routes = { list[0].children }/>
                        </Content>
                    </Layout>
                </Layout>
            </Layout>
        </div>
    )
}

const mapStateToProps = (state) => {
    const { list } = state
    return {
        list
    }
}


export default withRouter(connect(mapStateToProps)(Home))